import { ref } from 'vue';

export function useGrid(gridColumns = 12, gridRows = 12, gridGap = 10) {
    const gridContainer = ref(null);
    const gridCellWidth = ref(0);
    const gridCellHeight = ref(0);

    const updateGridSize = () => {
        if (!gridContainer.value) return;
        const containerWidth = gridContainer.value.clientWidth;
        gridCellWidth.value = Math.round((containerWidth - (gridColumns - 1) * gridGap) / gridColumns);
        gridCellHeight.value = Math.round(gridCellWidth.value * (90 / 146.5));
    };

    return {
        gridContainer,
        gridCellWidth,
        gridCellHeight,
        updateGridSize,
        gridColumns,
        gridRows,
        gridGap
    };
}
